<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--                                                               -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--                                                               -->
<link type="text/css" rel="stylesheet" href="DirectDemo.css">

<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>Web Application Starter Project</title>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->

<link rel="stylesheet" href="material/0.7.1/angular-material.css">
</script>
<style>
.menuBtn {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px;
  position: absolute;
  width: 36px;
} 
md-toolbar h1 {
  font-size: 1.250em;
  font-weight: 400;
  margin: auto;
}
md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0; 
  position: absolute;
  width: 1px;
}

/* Using Data-URI converted from svg until <md-icon> becomes available 
https://github.com/google/material-design-icons
*/
.menuBtn {
  background: transparent url() no-repeat  center center;
}
</style>
<!-- Force GWT-RPC calls to the webserver instead of the codeserver -->
<meta name="directdemo::gwt:property" content="baseUrl=http://localhost:8765/directdemo/">


<script type="text/javascript" src="angular/1.3.11/angular.js"></script>
<script type="text/javascript" src="angular/1.3.11/angular-animate.js"></script>
<script type="text/javascript" src="angular/1.3.11/angular-aria.js"></script>
<script type="text/javascript" src="material/0.7.1/angular-material.js"></script>
<script type="text/javascript" src="hammerjs/2.0.4/hammer.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="directdemo/directdemo.nocache.js"></script>


</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body layout="column" ng-controller="AppCtrl">

	<!-- OPTIONAL: include this if you want history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>


<md-toolbar layout="row">
      <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visually-hidden">Menu</span>
      </button>
      <h1>Direct Modelling &nbsp;&nbsp;&&nbsp;&nbsp;  AngularJS &nbsp;&nbsp;&&nbsp;&nbsp; Material Design</h1>
    </md-toolbar>

    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
        	<md-button class="xmd-raised" ng-click="choose('address_single');">Een veld</md-button>
        	<md-button class="xmd-raised" ng-click="choose('address_double');">Twee velden</md-button>
        	<md-button class="xmd-raised" ng-click="choose('nada');">Niets</md-button>
        </md-sidenav>
        <div layout="column" flex id="content" class="{{section}}">
            <md-content layout="column" flex class="md-padding">
				<ng-switch on="tab">
					<form name="userForm" layout="column" ng-controller="DirectAngularController" ng-switch-when="address_single">
						{{log(model)}}
						{{log(model.adres1())}}
						{{log(model.adres1().adres())}}
						{{log(model.adres1().adres().postcode())}}
						<dm-text model='model.adres1().adres().postcode()' label='Postcode'></dm-text>
						<dm-number model='model.adres1().adres().houseNumber()' label='Huisnummer'></dm-number>
						<dm-field model='model.adres1().adres().result().stad()' label='Stad'>{{model.adres1().adres().result().stad().getValue()}}</dm-field>
						<dm-field model='model.adres1().adres().result().straat()' label='Straat'>{{model.adres1().adres().result().straat().getValue()}}</dm-field>
						huisnummer min: {{minimum(model.adres1().adres().houseNumber())}} | max: {{maximum(model.adres1().adres().houseNumber())}}
					</form>
					<form name="userForm" layout="column" ng-controller="DirectAngularController" ng-switch-when="address_double">
						<dm-number model='model.adres2().digits()' label='Cijfers'></dm-number>
						<dm-text model='model.adres2().letters()' label='Letters'></dm-text>
						<dm-number model='model.adres2().adres().houseNumber()' label='Huisnummer'></dm-number>
						<dm-field model='model.adres2().adres().postcode()' label='Postcode'>{{model.adres2().adres().postcode().getValue()}}</dm-field>
						<dm-field model='model.adres2().adres().result().stad()' label='Stad'>{{model.adres2().adres().result().stad().getValue()}}</dm-field>
						<dm-field model='model.adres2().adres().result().straat()' label='Straat'>{{model.adres2().adres().result().straat().getValue()}}</dm-field>
						<dm-slider model='model.adres2().adres().houseNumber()' label='Huisnummer'></dm-slider>
						min: {{minimum(model.adres2().adres().houseNumber())}}
						max: {{maximum(model.adres2().adres().houseNumber())}}
					</form>
				</ng-switch>
            </md-content>
        </div>
    </div>

		
</body>
</html>
